<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的音乐</title>
    <link rel="stylesheet" href="layui/css/layui.css">
    <script src="layui/layui.js"></script>
</head>
<body>
<div class="layui-form">
    <lable class="layui-form-label">歌曲名</lable>
    <div class="layui-inline">
        <input class="layui-input" id="searchName" type="text">
    </div>
    <label>歌手</label>
    <div class="layui-input-inline">
        <select name="who" lay-filter="tag" id="select" class="layui-input">
        </select>
    </div>
    <button type="button" class="layui-btn" id="searchAnything">
        <i class="layui-icon">&#xe615;</i>
    </button>
</div>

<table id="song" lay-filter="songTable">

</table>

<!---------------------添加歌曲表格 start------------------------------->
<form class="layui-form" id="addSong" style="display: none;padding: 20px 30px 0 0" lay-filter="insertFilter">
    <div class="layui-form-item">
        <label class="layui-form-label">歌曲名</label>
        <div class="layui-input-inline">
            <input type="text" name="songName" placeholder="请输入歌曲名" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">发布日期</label>
        <div class="layui-input-block">
            <input type="hidden" name="songPath">
            <input type="text" class="layui-input" id="time" autocomplete="off" name="songTime">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">上传歌曲</label>
        <div class="layui-input-block">
            <button type="button" class="layui-btn" id="upload1"><i class="layui-icon"></i>上传音频</button>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">歌手</label>
        <div class="layui-input-inline">
            <select name="who" lay-filter="tag" id="addSelect" class="layui-input">
            </select>
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="addSubmit">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>
<!---------------------添加歌曲表格 end------------------------------->
<!---------------------修改歌曲表格 start------------------------------->
<form class="layui-form" id="updateSong" style="display: none;padding: 20px 30px 0 0" lay-filter="updateFilter">
    <div class="layui-form-item">
        <label class="layui-form-label">歌曲名</label>
        <div class="layui-input-inline">
            <input type="hidden" name="songId">
            <input type="text" name="songName"  class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">发布日期</label>
        <div class="layui-input-block">
            <input type="text" class="layui-input"  autocomplete="off" name="songTime">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">上传歌曲</label>
        <div class="layui-input-block">
            <input type="hidden" name="songPath">
            <button type="button" class="layui-btn" id="upload2">
                <i class="layui-icon">&#xe67c;</i>上传歌曲
            </button>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">歌手</label>
        <div class="layui-input-inline">
            <select name="who" lay-filter="tag" id="updateSelect" class="layui-input">
            </select>
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="updateSubmit">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>
<!---------------------修改文章表格 end------------------------------->
<script type="text/html" id="templet1">
    <audio src="\spring-day2\{{d.songPath}}" controls="controls" style="width: 100%;height: 100%"></audio>
</script>
<script type="text/html" id="templet2">
    {{
        d.singer.singerName
    }}
</script>
<!--===============添加、批量删除工具条 start===================-->
<script type="text/html" id="toolbar2">
    <a class="layui-btn layui-btn-sm" lay-event="add">添加</a>
    <a class="layui-btn layui-btn-sm layui-btn-danger" lay-event="deleteMany">批量删除</a>
</script>
<!--===============添加、批量删除工具条 end  ===================-->
<!--===============删除、修改工具条 start===================-->
<script type="text/html" id="toolbar1">
    <a class="layui-btn layui-btn-xs" lay-event="update">修改</a>
    <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="delete">删除</a>
</script>
<!--===============删除、修改工具条 end   ===================-->
<script>
    layui.use(["form","layer","table","laydate","upload"],function () {
        var form = layui.form;
        var layer = layui.layer;
        var table = layui.table;
        var laydate = layui.laydate;
        var upload = layui.upload;
        var $ = layui.$;
        $("#select").empty();
        $("#select").append(new Option("选择歌手",0));
        $.ajax({
            url:"singer/selectAll",
            dataType:"json",
            success:function (data) {
                console.log(data);
                $.each(data, function (index, item) {
                    $("#select").append(new Option(item.singerName, item.singerId));
                });
                form.render("select")
            }
        });
        table.render({
            elem:"#song",
            limit:5,
            limits:[5,10,15],
            url:"song/select",
            page:true,
            toolbar:"#toolbar2",
            cols:[[
                {type:"checkbox"},
                {field:"songId",title:"歌曲ID"},
                {field:"songName",title:"歌曲名"},
                {field:"songTime",title:"上传时间"},
                {field:"songPath",title:"试听",templet:"#templet1"},
                {field:"who",title:"歌手",templet:"#templet2"},
                {title:"操作",toolbar:'#toolbar1'}
            ]]
        });
        //-----------日期----------------
        laydate.render({
            elem:'input[name=songTime]'
        })
        //-------------------------------
        //---------------search start------------------
        $("#searchAnything").click(function () {

            table.reload('song',{
                where:{
                    songName:$("#searchName").val(),
                    who:$("#select").val()
                },
                page:{
                    curr:1
                }
            })
        })

        //----------------search end--------------------
        //==============添加歌曲的文件上传======================
        upload.render({
            elem:"#upload1",
            url:"song/upload",
            accept: 'audio',
            done:function (res) {
                form.val("insertFilter",{
                    songPath:res.songPath
                });
                layer.msg("歌曲上传成功")
            }
        });
        //==============================================
        //==============修改歌曲的文件上传======================
        upload.render({
            elem:"#upload2",
            url:"song/upload",
            accept: 'audio',
            done:function (res) {
                form.val("updateFilter",{
                    songPath:res.songPath
                });
                layer.msg("音乐上传成功")
            }
        });
        //==============================================

        //----------------toolbar2（表头工具条） 绑定----------------------
        table.on('toolbar(songTable)',function (obj) {
            //获取到table表格的id
            var checkStatus = table.checkStatus(obj.config.id);

            console.log(obj.config.id)
            if(obj.event =='add'){

                $("#addSelect").empty();
                $("#addSelect").append(new Option("选择歌手",0));
                $.ajax({
                    url:"singer/selectAll",
                    dataType:"json",
                    success:function (data) {
                        console.log(data);
                        $.each(data, function (index, item) {
                            $("#addSelect").append(new Option(item.singerName, item.singerId));
                        });
                        form.render("select")
                    }
                });

                layer.open({
                    type:1,
                    content:$("#addSong"),
                    area:["500px","450px"],
                    title:'添加文章'
                })
            }else if(obj.event == 'deleteMany'){
                var array = checkStatus.data;
                if(array.length == 0){
                    layer.msg("请至少选择一个复选框",{icon:5,time:2000});
                    return;
                }
                layer.confirm("检查一下别错删哦！",{icon:6},function () {
                    var ids = [];
                    for(var i=0;i<array.length;i++){
                        ids.push(array[i].songId);
                    }
                    $.ajax({
                        url:"song/deleteMany",
                        data:"ids="+ids,
                        dataType:"json",
                        success:function (data) {
                            if(data.isDelete){
                                layer.msg("删除成功",{icon:6,time:2000});
                                table.reload('song')
                            }else{
                                layer.msg("删除失败",{icon:5,time:2000});
                            }
                        }
                    })
                })

            }
        })
        //----------------------------------------------

        //----------------toolbar1(内容工具条) 绑定----------------------
        table.on('tool(songTable)',function (obj) {
            if(obj.event =='update'){
                console.log("修改id为"+obj.data.songId)
                $("#updateSelect").empty();
                $("#updateSelect").append(new Option("选择歌手",0));
                $.ajax({
                    url:"singer/selectAll",
                    dataType:"json",
                    success:function (data) {
                        console.log(data);
                        $.each(data, function (index, item) {
                            $("#updateSelect").append(new Option(item.singerName, item.singerId));
                        });
                        form.render("select")
                    }
                });
                $.ajax({
                    url:"song/selectOne",
                    data:"id="+obj.data.songId,
                    dataType:"json",
                    success:function (data) {
                        console.log(data)
                        //val中填写form表单lay-Filter的值
                        form.val('updateFilter',{
                            songId:data.songId,
                            songName:data.songName,
                            songTime:data.songTime,
                            who:data.who
                        })
                    }
                })
                layer.open({
                    type:1,
                    content:$("#updateSong"),
                    area:["400px","400px"],
                    title:'修改'
                })
            }else if(obj.event == 'delete'){
                layer.confirm("确定要删除吗？",{icon:5},function (index) {
                    var id = obj.data.songId;
                    $.ajax({
                        url:"song/delete",
                        dataType:"json",
                        data:"id="+id,
                        success:function (data) {
                            if(data.isDelete){
                                layer.msg("删除成功",{icon:1,time:2000});
                                table.reload('song');
                            }
                        }

                    })
                })

            }
        })
        //----------------------------------------------
        //-------------------添加按钮绑定事件 start---------------------------
        form.on('submit(addSubmit)',function () {

            $.ajax({
                type:"post",
                url:"song/insert",
                data:$("#addSong").serialize(),
                success:function (data) {
                    console.log(data);
                    if(data.isInsert){
                        $("#addSong")[0].reset();
                        layer.confirm("添加成功,要退出添加界面吗？",{icon: 1},function (index) {
                            layer.closeAll();
                        })
                        table.reload('song')
                    }
                },
                dateType:"json"
            });
            return false;
        });
        //-------------------添加按钮绑定事件 end---------------------------
        //-------------------修改按钮绑定事件 start-------------------------
        form.on('submit(updateSubmit)',function () {
            $.ajax({
                type:"post",
                url:"song/update",
                data:$("#updateSong").serialize(),
                success:function (data) {
                    console.log(data)
                    if(data.isUpdate){
                        layer.confirm("修改成功,要退出修改界面吗？",{icon: 1},function (index) {
                            layer.closeAll();
                        })
                        table.reload('song')
                    }
                },
                dateType:"json"
            });
            return false;
        });

        //-------------------修改按钮绑定事件 end---------------------------
    })
</script>
</body>
</html>